<template>
    <div class="box">
        <!-- 导航栏 -->
        <navList title="详情"></navList>
        <!-- 标签页 -->
        <van-tabs :active="active">
            <van-tab title="商品">
                <!-- 轮播图 -->
                <swiper :images="detail.pics"></swiper>
                <div>{{ detail.goods_name }}</div>
                <div style="color: red;font-weight: bold;font-size: 24px;">${{ detail.goods_price }}</div>

                <van-action-bar>
                    <van-action-bar-icon icon="chat-o" text="客服" />
                    <van-action-bar-icon icon="shop-o" text="店铺" />
                    <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="addShop()" />
                    <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
                </van-action-bar>
            </van-tab>
            <van-tab title="介绍">
                <div v-html="detail.goods_introduce"></div>
            </van-tab>
            <van-tab title="评价"></van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from "vue"

import navList from "@/components/navList.vue"
import swiper from "@/components/swiper.vue"

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

import { detailApi } from "@/api/api";
import { add } from "lodash"

const active = ref(0);

let detail = ref(route.query.goods_id)

const detailList = () => {
    detailApi(detail.value).then((res) => {
        console.log(res)
        detail.value = res.data.message
    })
}
detailList()

import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()

import _ from "lodash"

const addShop = _.debounce(() => {
    router.push('/main/shop')
    store.addShop(detail.value)
    // console.log(22)
}, 800)


</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>